<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
    <div class="default-header">
        <div class="row">
            <h1 class="col">Cloud configuration</h1>
        </div>
    </div>
    <div class="default-content" *ngIf="cloudNodeTemplate">
        <mat-accordion>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        General
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="text" 
                        [(ngModel)]="cloudNodeTemplate.name" 
                        placeholder="Template name">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="text" 
                        [(ngModel)]="cloudNodeTemplate.default_name_format" 
                        placeholder="Default name format">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="text" 
                        [(ngModel)]="cloudNodeTemplate.symbol" 
                        placeholder="Symbol">
                </mat-form-field>
                <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
                <mat-form-field class="form-field">
                    <mat-select 
                        placeholder="Category" 
                        [(ngModel)]="cloudNodeTemplate.category">
                        <mat-option *ngFor="let category of categories" [value]="category[1]">
                            {{category[0]}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-form-field class="select">
                    <mat-select 
                        placeholder="Console type" 
                        [(ngModel)]="cloudNodeTemplate.console_type">
                            <mat-option *ngFor="let type of consoleTypes" [value]="type">
                                {{type}}
                            </mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="text" 
                        [(ngModel)]="cloudNodeTemplate.remote_console_host" 
                        placeholder="Console host">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="text" 
                        [(ngModel)]="cloudNodeTemplate.remote_console_port" 
                        placeholder="Console port">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="text" 
                        [(ngModel)]="cloudNodeTemplate.remote_console_http_path" 
                        placeholder="Console HTTP path">
                </mat-form-field>
            </mat-expansion-panel>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Ethernet interfaces
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <div class="form-field" *ngFor="let port of portsMappingEthernet">
                    <div class="form-field">{{port.name}}</div><br/><br/>
                </div>
                <mat-form-field class="select">
                    <mat-select 
                        placeholder="Ethernet interface" 
                        [ngModelOptions]="{standalone: true}" 
                        [(ngModel)]="ethernetInterface">
                            <mat-option *ngFor="let type of ethernetInterfaces" [value]="type">
                                {{type}}
                            </mat-option>
                    </mat-select>
                </mat-form-field>
                <button mat-button class="form-field" (click)="onAddEthernetInterface()">Add</button> 
            </mat-expansion-panel>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        TAP interfaces
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <div class="form-field" *ngFor="let port of portsMappingTap">
                    <div class="form-field">{{port.name}}</div><br/><br/>
                </div>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="text" 
                        [(ngModel)]="tapInterface" 
                        placeholder="TAP interface">
                </mat-form-field>
                <button mat-button class="form-field" (click)="onAddTapInterface()">Add</button> 
            </mat-expansion-panel>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        UDP tunnels
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <table *ngIf="dataSourceUdp.length" class="table" mat-table [dataSource]="dataSourceUdp">
                    <ng-container matColumnDef="name">
                        <th mat-header-cell *matHeaderCellDef> Name </th>
                        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
                    </ng-container>
    
                    <ng-container matColumnDef="rport">
                        <th mat-header-cell *matHeaderCellDef> Local port </th>
                        <td mat-cell *matCellDef="let element"> {{element.rport}} </td>
                    </ng-container>
    
                    <ng-container matColumnDef="rhost">
                        <th mat-header-cell *matHeaderCellDef> Type </th>
                        <td mat-cell *matCellDef="let element"> {{element.rhost}} </td>
                    </ng-container>

                    <ng-container matColumnDef="lport">
                        <th mat-header-cell *matHeaderCellDef> Remote port </th>
                        <td mat-cell *matCellDef="let element"> {{element.lport}} </td>
                    </ng-container>
                    
                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                </table>
                <br *ngIf="dataSourceUdp.length"/>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="text" 
                        [(ngModel)]="newPort.name" 
                        placeholder="Name">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="number" 
                        [(ngModel)]="newPort.lport" 
                        placeholder="Local port">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="text" 
                        [(ngModel)]="newPort.rhost" 
                        placeholder="Remote host">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="number" 
                        [(ngModel)]="newPort.rport" 
                        placeholder="Remote port">
                </mat-form-field>
                <button mat-button class="form-field" (click)="onAddUdpInterface()">Add</button>
            </mat-expansion-panel>
        </mat-accordion>
        <div class="buttons-bar">
            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
            <button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
        </div>
    </div>
</div>
<app-symbols-menu *ngIf="isSymbolSelectionOpened && cloudNodeTemplate" [server]="server" [symbol]="cloudNodeTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
